/**
 * 实现懒加载图片的功能。
 * @param {Element} el - 需要进行懒加载的图片元素。
 * @param {Object} build - 包含配置选项的对象。
 * @param {string} [build.value] - 可选，IntersectionObserver的rootMargin属性值。
 */
const lazyImg = {
    // 只在
    bind: function (el, build) {
        const ioOptions = {} // 用于IntersectionObserver的配置对象。
        // 如果build对象中提供了value属性，则设置rootMargin。
        if (build.value) {
            ioOptions.rootMargin = build.value
        }
        // 创建一个IntersectionObserver实例，用于观察元素是否进入可视区域。
        const io = new IntersectionObserver((observers) => {
            // 遍历所有被观察者。
            observers.forEach(observer => {
                // 如果元素正在交叉（即进入可视区域），则进行加载。
                if (observer.isIntersecting) {
                    observer.target.src = observer.target.dataset.src // 设置图片源地址。
                    delete observer.target.dataset.src // 删除数据集中的src，防止重复加载。
                    io.unobserve(observer.target) // 停止观察该元素。
                }
            })
        }, ioOptions)
        io.observe(el) // 开始观察指定元素。
    }
}
export default lazyImg